<!-- 顽石超市页面,没用组件 -->
<template>
	<view class="">
		<!-- <ShangPin></ShangPin> -->
		<view>
			<view class="liebiao">
				<view class="shang" v-for="item in shangpinlist" :key="item.id" @click=details(item.id)>
					<view class=" ddd">
						<image src="../../static/88.jpg" mode="" class="img1"></image>
						<view class="">
							<text class="jia">￥{{item.sell_price}}</text>
							<text class="ge">{{item.market_price}}</text>
						</view>
						<view class=""><text class="text1">{{item.title}}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import ShangPin from '@/components/shangpinpin/shangpinpin.vue';
	export default {
		created() {
			this.shang()
		},
		data() {
			return {
				shangpinlist: [],
				pageindex: 1,
				number: 1,
			}
		},
		//上拉到底部时候触发onReachBottom()
		onReachBottom() {
			console.log("上拉触底时触发")
			if (this.number == 1) {
				uni.showToast({
					title: "加载中",
					icon: "loading"
				}, 1000)
				setTimeout(() => {
					uni.showToast({
						title: "加载成功",
						icon: "none"
					})
				}, 1200)
				this.number = 2
				this.shang()
			}
			if (this.shangpinlist.length >= 15) {
				uni.showToast({
					title: "暂无更多数据",
					icon: "none"
				})

			}

		},
		//下拉刷新
		onPullDownRefresh() {
			console.log("下拉时触发")
			this.shangpinlist = [] //数据清空
			uni.showLoading({
				title: "加载中"
			}) //提示框
			setTimeout(() => { //延时器
				this.shang() //重新加载数据
				uni.hideLoading() //关闭提示
			}, 1000)
			uni.stopPullDownRefresh() //下拉后，窗口自动返回
		},
		// components:{
		// 	"ShangPin":ShangPin
		// },
		methods: {
			// 渲染顽石超市里的商品
			async shang() {
					const {status,message} = await uni.$Http.get(`getgoods?${this.pageindex}`)
					this.shangpinlist = message
				},
				// 顽石超市商品跳转详情页
				async details(id) {
					uni.navigateTo({
						url: "../xiangqing/xiangqing?id=" + id
					})
				}
			}
	}
</script>

<style scoped>
	.shang {
		background-color: #FFFFFF;
	}

	.liebiao {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		background-color: #D7CBBF;
	}

	.ddd {
		width: 150px;
	}

	.img1 {
		width: 100%;
	}

	.text1 {
		font-size: 13px;
	}

	.jia {
		font-size: 20px;
		color: #E43C2F;
	}

	.ge {
		text-decoration: line-through;
	}

	.di {
		border: 1px solid red;
	}
</style>
